@base-n: 100;
@base-height: 1080;
@rem-pre-px: 1rem * (@base-n / @base-height);

.map-topn-finger {
  height: 100%;
  .ant-tabs-top {
    height: 100%;
  }
  .ant-tabs {
    display: flex;
    flex-direction: column;

    .ant-tabs-content {
      flex: 1;
    }
    .ant-tabs-tabpane {
      display: flex;
      flex-direction: column;
    }
    .ant-tabs-nav-container {
      font-size: 12 * @rem-pre-px;
    }
    .ant-tabs-bar {
      flex-shrink: 0;
      flex-grow: 0;
      margin-bottom: 0;
      border: none;
      color: #ffffff;
    }

    .ant-tabs-nav-wrap {
      margin: 0;
    }
    .ant-tabs-ink-bar {
      display: none !important;
    }
    .ant-tabs-nav {
      color: rgba(255, 255, 255, 0.5);
      .ant-tabs-tab-active {
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.5);
      }
      .ant-tabs-tab {
        margin-right: 9 * @rem-pre-px;
        padding: 6 * @rem-pre-px 9 * @rem-pre-px;
      }
      .ant-tabs-tab:hover {
        color: #ffffff;
      }
    }
    .ant-tabs-tab-prev-icon {
      background: url('../../images/icon/tab-prev.png');
      background-size: 100% 70%;
      background-repeat: no-repeat;
      svg {
        opacity: 0;
      }
    }
    .ant-tabs-tab-next-icon {
      background: url('../../images/icon/tab-next.png');
      background-size: 100% 70%;
      background-repeat: no-repeat;
      svg {
        opacity: 0;
      }
    }
  }

  .ant-empty-description {
    color: #ffffff;
    font-size: 12 * @rem-pre-px;
  }

  .finger-chart-item {
    flex: 1 1 1rem * (@base-n * 220 / @base-height);
    height: 1rem * (@base-n * 220 / @base-height);
  }
  .finger-chart-title {
    font-size: 14 * @rem-pre-px;
    font-weight: bold;
    color: #ffffff;
  }
}
